<template>
  <div class="demo-title">icon/demo1</div>
  <div class="demo">
    <div class="demo-item" v-for="(item, i) in icons" :key="`demo-item${i}`">
      <Icon :name="item" />
      <span>{{ item }}</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive } from 'vue'
  import Icon from '@sscd-mobile/icon'
  const icons = reactive([
    'add', 'addfollow', 'arrow-down', 'arrow-down2',
    'arrow-right', 'arrow-right2', 'arrow-up', 'arrow-up2',
    'ask', 'ask2', 'cart', 'cart2',
    'category', 'check-checked', 'check-disabled', 'check-normal',
    'Check', 'checked', 'checklist', 'circle-close',
    'clock', 'close-little', 'close', 'comment',
    'date', 'del', 'del2', 'dongdong',
    'dou-arrow-up', 'down-arrow', 'download', 'dshop',
    'edit', 'eye', 'fabulous', 'failure',
    'find', 'follow', 'footprint', 'github',
    'heart-fill-n', 'heart-fill', 'heart-fill1', 'heart-fill2',
    'heart-fill3', 'heart-n', 'heart', 'heart1',
    'heart2', 'home', 'horizontal-n', 'horizontal',
    'image-error', 'image', 'issue', 'joy-smile',
    'left', 'link', 'loading', 'loading1',
    'location', 'location2', 'locationg3', 'lower',
    'marshalling', 'mask-close', 'message', 'microphone',
    'minus', 'more-s', 'more-x', 'my',
    'my2', 'notice', 'order', 'people',
    'photograph', 'play-circle-fill', 'play-double-back', 'play-double-forward',
    'play-start', 'play-stop', 'plus', 'poweroff-circle-fill',
    'rect-down', 'rect-left', 'rect-right', 'rect-up',
    'refresh', 'refresh2', 'retweet', 'right',
    's-follow', 'scan', 'scan2', 'screen-little',
    'search', 'search2', 'service', 'setting',
    'share-n', 'share', 'share1', 'shop',
    'shop3', 'star-fill-n', 'star-fill', 'star-fill1',
    'star-fill2', 'star-n', 'star', 'star1',
    'star11', 'star2', 'success', 'tips',
    'top', 'triangle-down', 'triangle-up', 'uploader',
    'voice'
  ])
</script>

<style lang="less" scoped>
  .demo {
    background: #fff;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    > .demo-item {
      width: 90px;
      height: 76px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      > span {
        font-size: 12px;
        white-space: nowrap;
      }
    }
  }
</style>
